<template>
  <el-drawer
    :visible.sync="visible"
    direction="rtl"
    size="40%"
    :close-on-press-escape="false"
    :wrapper-closable="false"
    :show-close="false"
  >
    <template v-slot:title>
      <div class="drawer-header">
        <span>详情</span>
        <div>
          <el-button icon="el-icon-close" @click="visible = false">
            取消
          </el-button>
        </div>
      </div>
    </template>
    <el-descriptions class="margin-top" :column="2" size="medium" border>
      <el-descriptions-item label="用户ID">
        {{ formData.userId }}
      </el-descriptions-item>
      <el-descriptions-item label="用户名">
        {{ formData.username }}
      </el-descriptions-item>
      <el-descriptions-item label="姓名">
        {{ formData.name }}
      </el-descriptions-item>
      <el-descriptions-item label="性别">
        {{ formData.gender === 'M' ? '男' : '女' }}
      </el-descriptions-item>
      <el-descriptions-item label="年龄">
        {{ formData.age }}
      </el-descriptions-item>
      <el-descriptions-item label="生日">
        {{ formData.birthday }}
      </el-descriptions-item>
      <el-descriptions-item label="邮箱" span="3">
        {{ formData.email }}
      </el-descriptions-item>
      <el-descriptions-item label="手机号">
        {{ formData.mobile }}
      </el-descriptions-item>
      <el-descriptions-item label="所属组织">
        {{ formData.orgName }}
      </el-descriptions-item>
      <el-descriptions-item label="用户岗位" span="3">
        {{ postNames }}
      </el-descriptions-item>
      <el-descriptions-item label="用户角色" span="3">
        {{ roleNames }}
      </el-descriptions-item>
      <el-descriptions-item label="账户状态">
        {{ formData.locked === 'Y' ? '锁定' : '正常' }}
      </el-descriptions-item>
      <el-descriptions-item label="使用状态">
        {{ formData.status === 'Y' ? '启用' : '禁用' }}
      </el-descriptions-item>
      <el-descriptions-item label="备注" span="3">
        {{ formData.remark }}
      </el-descriptions-item>
    </el-descriptions>
  </el-drawer>
</template>

<script>
import { convertPost, convertRole } from '@/utils'
import { handleGetAllRoleList } from '@/views/sys/role/api'
import { handleGetAllPostList } from '@/views/sys/post/api'

export default {
  name: 'UserInfoDetail',
  components: { },
  directives: { },
  filters: {},
  props: {
    detail: {
      type: Object,
      require: true,
      default: undefined
    }
  },
  data() {
    return {
      // 状态字典
      lockedOptions: [{ code: 'Y', text: '锁定' }, { code: 'N', text: '正常' }],
      statusOptions: [{ code: 'Y', text: '启用' }, { code: 'N', text: '禁用' }],
      // 是否显示弹出层
      visible: false,
      // 表单数据对象
      formData: {},
      roleOptions: [],
      postOptions: []
    }
  },
  computed: {
    postNames: function() {
      if (this.formData.postId) {
        return convertPost(this.formData.postId.split(','), this.postOptions)
      }
      return ''
    },
    roleNames: function() {
      if (this.formData.roleId) {
        return convertRole(this.formData.roleId.split(','), this.roleOptions)
      }
      return ''
    }
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    init() {
      this.visible = this.detail.visible
      this.formData = this.detail.data
      handleGetAllRoleList().then(res => {
        this.roleOptions = res.data
      })
      handleGetAllPostList().then(res => {
        this.postOptions = res.data
      })
    },
    // 关闭弹出层
    handleClose() {
      this.visible = false
    }
  }
}
</script>

<!--<style scoped>-->
<!--  .el-drawer >>> .el-drawer__body {-->
<!--    padding: 3px 10px !important;-->
<!--  }-->

<!--  .desc-table {-->
<!--    border-collapse: collapse;-->
<!--    width: 100%;-->
<!--    table-layout: fixed;-->
<!--    border: 1px solid #e6ebf5;-->
<!--  }-->

<!--  .desc-table >>> tr {-->
<!--    display: table-row;-->
<!--    vertical-align: inherit;-->
<!--    unicode-bidi: isolate;-->
<!--    border-color: inherit;-->
<!--  }-->

<!--  .desc-table__cell {-->
<!--    //-webkit-box-sizing: border-box;-->
<!--    box-sizing: border-box;-->
<!--    text-align: left;-->
<!--    font-size: 14px;-->
<!--    font-weight: normal;-->
<!--    line-height: 3;-->
<!--    border: 1px solid #e6ebf5;-->
<!--    padding-left: 8px;-->
<!--  }-->

<!--  .desc-table__label {-->
<!--      font-weight: bold;-->
<!--      color: #909399;-->
<!--      background: #fafafa;-->
<!--    }-->

<!--  .desc-table__content {-->
<!--    box-sizing: border-box;-->
<!--    font-size: 14px;-->
<!--    color: #303133;-->
<!--  }-->
<!--</style>-->
